<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>浏览页面</title>
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/app/admin/admin/css/reset.css"/>
</head>
<body class="pear-container">

<!-- 顶部查询表单 -->
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form top-search-from">

            <div class="layui-form-item">
                <label class="layui-form-label">行号</label>
                <div class="layui-input-block">
                    <input type="number" name="start_line" value="" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">行数</label>
                <div class="layui-input-block">
                    <input type="number" name="lines" value="" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item layui-inline">
                <label class="layui-form-label"></label>
                <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="table-query">
                    <i class="layui-icon layui-icon-search"></i>查询
                </button>
                <button type="reset" class="pear-btn pear-btn-md" lay-submit lay-filter="table-reset">
                    <i class="layui-icon layui-icon-refresh"></i>重置
                </button>
            </div>
            <div class="toggle-btn">
                <a class="layui-hide">展开<i class="layui-icon layui-icon-down"></i></a>
                <a class="layui-hide">收起<i class="layui-icon layui-icon-up"></i></a>
            </div>
        </form>
    </div>
</div>

<!-- 数据表格 -->
<div class="layui-card">
    <div class="layui-card-body">
        <pre class="layui-code code-demo" style="height: calc(100vh - 150px);overflow: auto">
        </pre>
    </div>
</div>

<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
<script src="/app/admin/component/pear/pear.js"></script>
<script src="/app/admin/admin/js/permission.js"></script>
<script src="/app/admin/admin/js/common.js"></script>

<script>

    layui.use(function () {

        // code

        layui.code({

            elem: '.code-demo'

        });

    })

    // 相关常量
    const SELECT_API = "/app/webmanlogs/index/filedetail" + location.search;

    // 获取数据库记录
    layui.use(["form", "util", "popup"], function () {
        let $ = layui.$;
        let form = layui.form;
        $.ajax({
            url: SELECT_API,
            dataType: "json",
            success: function (res) {
                $('.code-demo').html(res.data.rawContent)
            }
        });

        // 表格顶部搜索事件
        form.on("submit(table-query)", function (data) {
            $.ajax({
                url: SELECT_API + '&start_line=' + data.field.start_line + "&lines=" + data.field.lines,
                dataType: "json",
                success: function (res) {
                    $('.code-demo').html(res.data.rawContent)
                }
            });
            return false;
        });
    });

</script>
</body>
</html>
